<template>
  <div class="chat-container">
    <VueDragResize
      v-if="mode==='fix'"
      id="chat-container"
      :w="62"
      :h="62"
      :y="chatTop"
      :x="chatLeft"
      :active="false"
      :is-resizable="false"
      drag-cancel="i"
      class="chat-entrance-button"
      @dragging="resize"
    >
      <i class="el-icon-chat-dot-square" @click="openChat" />
    </VueDragResize>
    <el-tooltip v-if="mode==='button'" class="item" effect="dark" content="聊天" placement="bottom">
      <span style="display:block;" @click="openChat"> <i class="el-icon-chat-dot-square" /></span>
    </el-tooltip>
    <div v-if="chatVisible" class="chat-main-container">
      <div class="chat-main-container-wrap">
        <transition name="fade-transform" mode="out-in">
          <div class="chat-main-dialog" :style="{width:width+'px',height:height+'px'}">
            <el-empty description="聊天系统正在开发，敬请期待！" />
          </div>
        </transition>
      </div>

      <div class="chat-main-container-shadow" />
    </div>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'

export default {
  components: { VueDragResize },
  props: {
    // 模式 浮动、按钮
    mode: {
      type: String,
      default: 'fix'
    },
    width: {
      type: Number,
      default: 1020
    },
    height: {
      type: Number,
      default: 720
    }
  },
  data() {
    return {
      chatTop: 0,
      chatLeft: 0,
      chatVisible: false
    }
  },
  created() {
    this.chatLeft = document.body.clientWidth - 62 - 30
    this.chatTop = document.body.clientHeight - 62 - 60
  },
  methods: {
    resize(newRect) {
      this.chatTop = newRect.top
      this.chatLeft = newRect.left
    },
    openChat() {
      this.chatVisible = !this.chatVisible
    }
  }
}
</script>
<style lang="scss" scoped>
  .chat-container{
    .vdr.active:before{
      outline: 0 !important;
    }
    .chat-entrance-button{
      width:62px;
      height:62px;
      background-color:var(--color-primary);
      position: fixed;
      bottom: 50px;
      right: 30px;
      text-align: center;
      border-radius: 31px;
      z-index: 10000 !important;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      i{
        font-size:30px;
      }
    }

    .chat-main-container{
      .chat-main-container-wrap{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .chat-main-dialog{
          width: 1020px;
          height: 720px;
          border-radius: 4px;
          box-shadow: 0px 7px 14px 0px rgba(65,69,88,0.10), 0px 3px 6px 0px rgba(0,0,0,0.07);
          background-color: #fff;
          margin: 0 auto;
          color: #404040;
          text-align: left;
        }
      }
      .chat-main-container-shadow{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
        background: #000;
        z-index: 1999;
      }
    }
  }
</style>
